<template>
  <div class="login-window">
    <div class="black black-h">
      <!-- <div>为DID添加公钥，公钥ID随添加顺序自增长且不可改变。</div> -->
      <div class="logo" style="text-align: center;">
        <img src="../../assets/img/login/zuozhancopy.png" alt=""
          style="width: 52px; height: 52px; display: inline-block; vertical-align: middle;" />
        <span style="display: inline-block; vertical-align: middle; margin-left: 5px; font-size: 50px;">BC-DMIA</span>
        <br>
        <span style="display: inline-block; vertical-align: middle;">基于区块链的多域作战身份认证系统</span>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录界面" name="first">
          <el-row :gutter="20" class="mt3">
            <el-col :span="20" :offset="0">
              <el-form label-position="right" label-width="130px" :model="form">
                <el-form-item label="账号">
                  <el-input v-model="form.number" placeholder="请输入你的账号"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="form.password" placeholder="请输入你的密码" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="私钥">
                  <el-col :span="5">
                    <div class="upload-button">
                      <el-upload class="upload" ref="upload" action="string" :file-list="fileList" :auto-upload="false"
                        :http-request="uploadFile" :on-change="handleChange" :on-preview="handlePreview"
                        :on-remove="handleRemove" multiple="multiple">
                        <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
                      </el-upload>
                    </div>
                  </el-col>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- <el-col :span="10" :offset="13">没有私钥？点击 <el-button type="text" @click="genKeys">此处</el-button></el-col> -->
            <div class="login-button">
              <el-button ref="loginButton" size="medium" type="primary" @click="login">登录</el-button>
            </div>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import NoData from '../../../src/components/noData.vue';

  export default {
    created() {
      window.localStorage.clear();
    },
    components: {
      NoData,
    },
    data() {
      return {
        fileList: [],
        multiple: false,
        activeName: 'first',
        form: {
          number: '',
          password: '',
        },
        data: {
          addPublicKey: '',
          addPrivateKey: '',
          publicKeyID: '',
        },
        uploadAction: 'http://localhost:8083/upload', // 修改为后端处理文件上传的接口地址
      };
    },
    methods: {

      login() {
        // 执行登录逻辑
      },
      handleKeyPress(event) {
        if (event.key === 'Enter') {
          this.$refs.loginButton.$el.click();
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      delFile() {
        this.fileList = [];
      },
      handleChange(file, fileList) {
        this.fileList = fileList;
        // console.log(this.fileList, "sb");
      },
      //自定义上传文件
      uploadFile(file) {
        this.formData.append('file', file.file);
        // console.log(file.file, "sb2");
      },
      //删除文件
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 点击文件
      handlePreview(file) {
        console.log(file);
      },
      async login() {
        let formData = new FormData();
        console.log(formData.get('file_name'));
        if (this.fileList[0] != null) {
          formData.append('file_name', this.fileList[0].name);
          formData.append('file', this.fileList[0].raw);
        } else {
          formData.append('file_name', 'null');
          formData.append('file', new Blob([''], {
            type: 'text/plain'
          }));
        }
        formData.append('number', this.form.number);
        formData.append('password', this.form.password);

        console.log(formData.get('number'));
        console.log(formData.get('password'));
        console.log(formData.get('file_name'));
        try {
          const response = await this.$http.post('http://62.234.3.184:8081/login/login', formData);
          console.log('userDid', response.login.user);
          // 根据后端返回的数据进行处理
          if (response.code === 0) {
            // 登录成功
            console.log('登录成功');
            console.log(response);
            window.localStorage.setItem('userDid', response.login.user.did);
            window.localStorage.setItem('number', response.login.user.number);
            window.localStorage.setItem('userName', response.login.user.name);
            window.localStorage.setItem('userType', response.login.user.userType);
            window.localStorage.setItem('loginNumber', response.login.user.loginNumber);
            window.localStorage.setItem('kyc_status', response.login.user.kycStatus);
            window.localStorage.setItem('loginState', 1);
            this.$router.push({
              // 推送方法
              path: '/UserInformation', //导航的路径
            });
          } else {
            // 登录失败
            console.log('登录失败');
          }
        } catch (error) {
          // 处理请求错误
          console.error('请求错误:', error);
        }
      },
    },
    mounted() {
      window.addEventListener('keyup', this.handleKeyPress);
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.handleKeyPress);
    },
  };
</script>

<style lang="less" scoped>
  .logo span {
    font-family: 'Times New Roman', Times, serif, sans-serif;
    color: #000080;
  }

  .did-content {
    margin-top: 10%;

    h1 {
      color: #666666;
      width: 320px;
      margin: 0 auto;
    }
  }

  .login-window {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* Adjust this as needed */
    background-color: #f0f0f0;
    /* Adjust the background color as needed */
    background: url('../../assets/img/login/bg-login.png');
  }

  .login-button {
    width: 30px;
    margin: 0 auto;
  }

  .m-a0 {
    margin: 0 auto;
  }

  .black-h {
    width: 30%;
  }

  .black-height {
    height: calc(50% - 90px);
    overflow-y: auto;
  }

  .nodata {
    margin-top: 10%;
  }

  .did-width {
    width: 300px;
    margin: 0 auto;
  }

  .publicKey {
    display: flex;
    line-height: 30px;

    .span {
      width: 100px;
      text-align: right;
    }

    .span-key {
      width: calc(100% - 50px);
      word-break: break-word;
      white-space: pre-line;
    }
  }
</style>